<template>
  <div style="background: #f7f8fa">
    <div class="broadcast_box">
      <!-- <div class="big_title_style" style="font-size: 18px;">直播间</div> -->
      <div v-if="this.a === false" class="box-shadow title">
        您还没有授权，请先去<a style="color: #409eff;font-weight: bold;margin-left:5px;font-size:18px" @click="gotolink">授权</a>
      </div>
      <div v-if="this.a === true&&this.b === false" class="box-shadow title">
        您还没有授权，请先去授权
      </div>
      <div
        v-if="this.b === true"
        class="box-shadow"
        style="
          position: relative;
          background-color: white;
          border-radius: 10px;
          margin-bottom: 20px;
          padding: 20px
        "
      >
        <div style="margin: 0 0 20px 0">
          <el-button @click="establish()" type="primary">创建直播间</el-button>
        </div>

        <div>
          <el-table border :data="info" style="width: 100%">
            <el-table-column prop="name" label="最近开播">
              <template slot-scope="scope">
                <div>{{ scope.row.date }}</div>
                <div style="color: #c0c4cc">{{ scope.row.time }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="直播间信息" width="400">
              <template slot-scope="scope">
                <div style="display: flex">
                  <!-- <img style="width:89px;height:89px;" :src="scope.row.cover_img" /> -->
                  <!-- <div>
                    <el-image style="width: 100px; height: 100px" :src="scope.row.shareImgStr"></el-image>
                  </div> -->
                 <div
                    style="width: 100px; height: 100px"
                    v-html="imgTransition(scope.row.shareImgUrl)"
                  ></div>
                  <div style="margin-top: 10px; margin-left: 5px">
                    <div>{{ scope.row.name }}</div>
                    <div style="color: #c0c4cc">
                      主播：{{ scope.row.anchor_name }}
                    </div>
                    <div style="color: #c0c4cc">
                      房间号：{{ scope.row.roomid }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="直播状态">
              <template slot-scope="scope">
                <div>{{ state(scope.row.live_status) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="300">
              <template slot-scope="scope">
                <div v-if="scope.row.jurisdiction == 1">
                  <span style="margin-right:15px" v-if="scope.row.live_status==101 || scope.row.live_status==102"><a @click="openConsole(scope.row)">控制台</a></span>
                  <span style="margin-right:15px" v-if="scope.row.live_status==101 || scope.row.live_status==102" @click="edit(scope.row)"
                  ><a>编辑</a></span
                  >
                  <span style="margin-right: 15px" v-if="scope.row.live_status==101 || scope.row.live_status==102">
                    <el-popover placement="bottom" width="100%" trigger="click">
                      <div
                        style="width: 400px; height: 400px; border-radius: 10px"
                        v-html="cdnUrl"
                      ></div>
                      <a
                        slot="reference"
                        @click="shareImgMethod(scope.row.roomid)"
                      >分享码</a
                      >
                    </el-popover>
                  </span>
                  <span><a @click="deleteRoom(scope.row)">删除</a></span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="query.pagelimit"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <broadcastList
      v-if="broadcastInfo"
      :broadcastInfoStr.sync="broadcastInfo"
    ></broadcastList>
  </div>
</template>

<script>
  import {queryPermissions} from "@/api/applet/broadcast";
  import {isBindThirdParty} from "@/api/applet/authorization";
  import {
    getRoomList,
    deleteRoom,
    getGoodsList,
    getShare,
  } from "@/api/applet/broadcast";
  import broadcastList from "./broadcastInfo";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {broadcastList},
    props: {},
    data() {
      //这里存数据
      return {
        a: false,
        b: false,
        //开播码
        cdnUrl: "",
        //创建直播间
        broadcastInfo: false,
        //控制台开关
        console: false,
        //某直播间数据
        broadcastData: {},
        //总数量
        total: 0,
        info: [],
        query: {
          page: 1,
          pagelimit: 5,
        },
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      gotolink() {
        this.$router.push('/store/applet/authorization')
      },
      getData() {
        getRoomList(this.query).then((response) => {
          this.info = response.data.room_info;
          this.total = response.data.total;
        });
      },
      //创建直播间
      establish() {
        this.broadcastInfo = true;
        this.$router.push("/broadcastInfo/data");
      },
      edit(data) {
        this.$router.push({path: "/broadcastInfo/data", query: {data}});
      },
      openConsole(data) {
        this.$router.push({path: "/consoles/data", query: {data}});
      },
      //开播码
      shareImgMethod(id) {
        getShare(id).then((response) => {
          var imgid = Math.random(),
            frameid = 'frameimg' + imgid;
          window['img' + imgid] = '<img id="img" style="width:400px;height:400px" src=\'' + response.data.cdnUrl + '?kilobug\' />' +
            '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
          this.cdnUrl = '<iframe id="' + frameid + '" src="javascript:parent[\'img' + imgid + '\'];" frameBorder="0" scrolling="no" width="400px" height="400px"></iframe>'
        });
      },
      //删除直播间
      deleteRoom(data) {
        let $this = this
        $this.$confirm("您确认删除【" + data.name + "】直播间吗？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          deleteRoom(data.roomid).then((response) => {
            if (response.data) {
              getRoomList($this.query).then((response) => {
          $this.info = response.data.room_info;
          $this.total = response.data.total;
        });
              $this.$forceUpdate()
              $this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              $this.$message.error("网络繁忙，请稍后重试");
            }
          });
        });
      },
      //换页
      handleCurrentChange: function (cpage) {
        this.query.page = cpage;
        this.getData();
      },
      //转换微信图片
      imgTransition(img) {
        var imgid = Math.random(),
          frameid = 'frameimg' + imgid;
        window['img' + imgid] = '<img id="img" style="width:89px;height:89px" src=\'' + img + '?kilobug\' />' +
          '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
        let msg = '<iframe id="' + frameid + '" src="javascript:parent[\'img' + imgid + '\'];" frameBorder="0" scrolling="no" width="100px"></iframe>'
        return msg
      },
      //状态
      state(liveStatus) {
        if (liveStatus == 101) {
          return "直播中";
        } else if (liveStatus == 102) {
          return "未开始";
        } else if (liveStatus == 103) {
          return "已结束";
        } else if (liveStatus == 104) {
          return "禁播";
        } else if (liveStatus == 105) {
          return "暂停";
        } else if (liveStatus == 106) {
          return "异常";
        } else if (liveStatus == 107) {
          return "已过期";
        }
      },
      getisBindThirdParty() {
        isBindThirdParty("applet").then((response) => {
          if (response.authorizationStatus == 0) this.a = true;
          if (this.a == true) {
            queryPermissions().then((response) => {
              if (response.msg == 0) {
                this.b = true
                this.getData();
              }
            });
          }
        });
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getisBindThirdParty();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //声明周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁之后
    activated() {
    }, //缓存keep-alive
  };
</script>

<style scoped>
  .broadcast_box {
    width: 1200px;
    margin: 30px auto 0;
  }

  .box-shadow {
    border: 1px solid #eee;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: 30px;
    background-color: whitesmoke;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }

  .typeface {
    display: inline-block;
    font-size: 16px;
    color: #333;
    position: relative;
  }

  .typeface2 {
    color: #c0c4cc;
    font-size: 16px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .title {
    position: relative;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
    height: 100px;
    font-size: 14px;
  }
</style>
